<template>
  <view>
    <status-bar></status-bar>

    <layout-page :size="22">
      <template #default>
        <load-data
          :categoryList="categoryList"
          :positions="'index'"
        ></load-data>
      </template>
      <template #show>
        <view class="mt-12 flex flex-1 justify-center items-center">
          <icon-btn icon-size="16px" @handleClick="changeTo"
            >{{ '\ue606' }}
          </icon-btn>
        </view>
      </template>
    </layout-page>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import StatusBar from '@/layout/PageItemComponents/statusBar.vue'
import LayoutPage from '@/layout/LayoutPage.vue'
import IconBtn from '@/layout/components/IconBtn.vue'
import { getIndexCategory } from '@/api/indexCategory'
import type { CategoryTypeData } from '@/common/topic/topicType'
import LoadData from '@/layout/PageItemComponents/loadData.vue'

const type = ref('article')
const categoryList = ref<CategoryTypeData[]>([])
const follow = reactive<CategoryTypeData>({
  id: 0,
  title: '关注'
})
// 跳转到搜索页面
const changeTo = () => {
  uni.navigateTo({
    url: '/pages/search/search'
  })
}
onMounted(() => {
  loadData2()
  // 监听 Tab 切换事件
  // uni.$on('tabChange', (event) => {
  //   activeId.value = event.tabId
  //   loadData()
  // })
})
// onUnmounted(() => {
//   // 移除事件监听
//   uni.$off('tabChange')
// })
// const preLoad = ref(false)
// 加载分类标签数据
const loadData2 = () => {
  getIndexCategory(type.value).then((res) => {
    categoryList.value = res.data
    categoryList.value.unshift(follow)
  })
}
</script>
<script lang="ts">
export default {
  name: 'IndexComponents'
}
</script>
<style scoped></style>
